<template>
  <table-header
          placeholder="请输入人物名称"
          :queryList="queryList"
          @pagination="getDataList"
  >
    <template #operation>
      <el-button type="primary" size="mini" @click="handleCreatePerson">
        <el-icon>
          <plus />
        </el-icon>
        新建人物
      </el-button>
    </template>
  </table-header>
  <table-data :tableData="tableData" :isloading="isloading">
    <template #main>
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="英文名" prop="enname" />
      <el-table-column label="出生日期" prop="birthdate" />
      <el-table-column label="性别" prop="gender" />
      <el-table-column label="出生地" prop="birthplace" />
      <el-table-column label="星座" prop="constellation" />
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text" size="mini" @click="handleUpdatePerson(row)" :disabled="row.isdefault == 1" :title="row.isdefault == 1 ? '系统人物不可操作' : ''">编辑</el-button>
          <el-button type="text" size="mini" :style="{color: row.isdefault == 1 ? '' : 'red'}" @click="handleDeletePerson(row)" :disabled="row.isdefault == 1" :title="row.isdefault == 1 ? '系统人物不可操作' : ''">删除</el-button>
          <el-button type="text" size="mini" @click="handlePersonDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </template>
  </table-data>
  <el-row class="mt10">
    <el-col :span="24">
      <table-pagination
              :queryList="queryList"
              :total="tableData.total"
              @pagination="getDataList"
      />
    </el-col>
  </el-row>
  <create-person
          ref="dialogFormRef"
          :dialog-status="dialogStatus"
          :dialog-visible="dialogVisible"
          :dialog-form-data="dialogFormData"
          @handleCancelDialog="handleCancelDialog"
          @reloadData="getDataList"
  />
  <person-info
          :person-dialog-title="personDialogTitle"
          :person-dialog-visible="personDialogVisible"
          :person-info="personInfo"
          @handleCanclePersonDialog="handleCanclePersonDialog"
  />
</template>

<script>
  import {reactive, ref, nextTick} from 'vue'
  import {Plus} from "@element-plus/icons"
  import TableHeader from "@/views/public/TableHeader";
  import TableData from "@/views/public/TableData";
  import TablePagination from "@/views/public/TablePagination";
  import {getPersons, deletePerson} from "@/api/media/constant";
  import CreatePerson from "./components/CreatePerson";
  import PersonInfo from "./components/PersonInfo";
  import {ElMessageBox, ElMessage} from 'element-plus'

  export default {
    name: "index",
    components: {TableHeader, TableData, Plus, TablePagination, CreatePerson, PersonInfo},
    setup() {
      const queryList = reactive({
        page: 1,
        pagesize: 25,
        keyword: undefined
      })
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const isloading = ref(false)
      const dialogVisible = ref(false)
      const dialogStatus = ref('create')
      const dialogFormData = reactive({
        id: undefined,
        name: '',
        enname: '',
        gender: '未知',
        birthdate: null,
        birthplace: '',
        bloodtype: null,
        constellation: null,
        occupation: [],
        profile: '',
        achievement: [],
        works: [],
      })
      const dialogFormRef = ref(null)
      const personInfo = ref({})
      const personDialogVisible = ref(false)
      const personDialogTitle = ref('')

      /** 获取人物列表 **/
      const getDataList = () => {
        isloading.value = true
        getPersons(queryList).then(response => {
          isloading.value = false
          const {total, list} = response.data
          tableData.total = total
          tableData.listData = list
        })
      }
      /** 开启新建人物弹框 **/
      const handleCreatePerson = () => {
        resetFormData()
        dialogStatus.value = 'create'
        dialogVisible.value = true
        nextTick(() => {
          dialogFormRef.value.dialogFormDataRef.clearValidate()
        })
      }
      /** 重置人物form表单 **/
      const resetFormData = () => {
        dialogFormData.id = undefined
        dialogFormData.name = ''
        dialogFormData.enname = ''
        dialogFormData.achievement = []
        dialogFormData.birthdate = null
        dialogFormData.birthplace = ''
        dialogFormData.bloodtype = null
        dialogFormData.constellation = null
        dialogFormData.gender = '未知'
        dialogFormData.occupation = []
        dialogFormData.profile = ''
        dialogFormData.works = []
      }
      /** 关闭弹框 **/
      const handleCancelDialog = () => {
        dialogVisible.value = false
      }
      /** 开启编辑人物弹框 **/
      const handleUpdatePerson = (row) => {
        dialogFormData.id = row.id
        dialogFormData.name = row.name
        dialogFormData.enname = row.enname
        dialogFormData.works = row.works
        dialogFormData.profile = row.profile
        dialogFormData.occupation = row.occupation
        dialogFormData.gender = row.gender
        dialogFormData.constellation = row.constellation
        dialogFormData.bloodtype = row.bloodtype
        dialogFormData.birthplace = row.birthplace
        dialogFormData.birthdate = row.birthdate
        dialogFormData.achievement = row.achievement
        dialogStatus.value = 'update'
        dialogVisible.value = true
        nextTick(() => {
          dialogFormRef.value.dialogFormDataRef.clearValidate()
        })
        console.log(row);
      }
      /** 查看任务详细信息 **/
      const handlePersonDetail = (row) => {
        personInfo.value = row
        personDialogTitle.value = '人物 ' + row.name + ' 详细信息'
        personDialogVisible.value = true
        console.log(row);
      }
      /** 关闭人物详情弹框 **/
      const handleCanclePersonDialog = () => {
        personDialogVisible.value = false
      }
      /** 删除人物 **/
      const handleDeletePerson = (row) => {
        ElMessageBox.confirm('确定要删除人物 ' + row.name + ' 吗？', '删除人物', {
          confirmButtonText: '确定',
          cancelButtonText: '确定',
          type: 'warning'
        }).then(() => {
          deletePerson({id: row.id}).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              getDataList()
            }
          })
        }).catch(() => {})
      }

      const init = () => {
        getDataList()
      }
      init()

      return {
        queryList,
        tableData,
        isloading,
        getDataList,
        dialogVisible,
        dialogStatus,
        dialogFormData,
        handleCreatePerson,
        handleCancelDialog,
        dialogFormRef,
        handleUpdatePerson,
        handlePersonDetail,
        personInfo,
        personDialogVisible,
        personDialogTitle,
        handleCanclePersonDialog,
        handleDeletePerson
      }
    }
  }
</script>

<style scoped>

</style>
